<template>
  <div>
    <div class="header">
        <router-link  :class="{'router-link-active':obj.isActive==item.tab}" v-for="(item) in tabList" :key="item.tab" :to="item.path">
          <span @click="onClickActive(item.tab)">{{item.name}}</span>
        </router-link>
    </div>
    <div class="content">
      <keep-alive>
        <router-view name='AddClass'></router-view>
      </keep-alive>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        obj:{
          isActive:''
        },
        tabs:'',
        tabList:[
          {
            path:'/class/add_class',
            tab:'add_class',
            name:'课程信息',
            index:1
          },
          {
            path:'/class/danyuan_class',
            tab:'danyuan_class',
            name:'单元信息',
            index:2
          },
          {
            path:'/class/keshi_class',
            tab:'keshi_class',
            name:'课时信息',
            index:3
          }
        ]
      }
    },
   watch:{
      '$route':function(toRouter){
        this.obj.isActive=toRouter.meta.routerParent
        this.putsessionTab(toRouter.meta.routerParent)
        this.doMemuActive(toRouter)
      },
    },
    created(){
      if (window.performance.navigation.type == 1) {
        // console.log("页面被刷新")
      }else{
        this.putsessionTab(' ')
      }
      // console.log(this.$route.path.slice(this.$route.path.lastIndexOf('/')+1))
      /**
       * 处理点击单元信息-新增
       * 点击左侧菜单上传课程-新增
       * 会出现课程信息，单元信息同时选中的bug
       */
      if(sessionStorage.getItem('tab') && this.$route.path.slice(this.$route.path.lastIndexOf('/')+1)!='add_class'){
        this.obj.isActive=sessionStorage.getItem('tab')
      }else{
        this.obj.isActive=''
        this.putsessionTab(' ')
      }
    },
    methods: {
      //刷新时需要记录当前选中哪个菜单
      putsessionTab(index){
        sessionStorage.setItem('tab',index)
      },
      doMemuActive(toRouter) {
        if (toRouter && toRouter.meta && toRouter.meta.routerParent) {
          this.obj.isActive=toRouter.meta.routerParent
          this.putsessionTab(this.obj.isActive)
        } else {
          // this.clickMenuNum = -1;
        }
      },
     onClickActive(index){
       //点击的时候存记录第几个
       this.obj.isActive=index
       this.$router.push(    
        {
          path: this.$route.path,
          query: {id: index}
        }
      )
     },
     onActiveTab(index){
       this.obj.isActive=index;
       //这里是需要记录当前选中的tab，为了三级详情内容中可以选对当前tab
      this.putsessionTab(index)
     }
    }
  };
</script>
<style scoped>
  .header span{
    display: inline-block;
    padding:10px;
    border:#000 solid 1px;
    border-radius: 50%;
    text-align: center;
    margin-right:40px;
    color:#000
  }
  .router-link-active span,.router-link-exact-active span{
    color:red
  }
  .content{
    padding:20px;
  }
  .box-flex{display: flex;align-items: center;margin-bottom:20px;}
  .label{margin-right:10px;min-width:80px;}
</style>